<template>
    <view class="viewport">
        <!-- 顶部背景 -->
        <view class="navbar" :style="{ paddingTop: safeArea.top + 'px' }">
            <view class="back icon-left" @click="goBack"></view>
            <view class="title">个人信息</view>
        </view>
        <scroll-view scroll-y>
            <!-- 头像 -->
            <view class="avatar" @tap="changeAvatar">
                <image :src="memberProfile.avatar" mode="aspectFill" />
                <text>点击修改头像</text>
            </view>
            <view class="form">
                <view class="form-item">
                    <text class="label">账号</text>
                    <!-- 账号名不能修改，用 text 组件展示 -->
                    <text>{{ memberProfile.account }}</text>
                </view>
                <view class="form-item">
                    <text class="label">昵称</text>
                    <!-- 输入框通过 v-model 双向绑定修改数据 -->
                    <input v-model="memberProfile.nickname" />
                </view>
                <view class="form-item">
                    <text class="label">性别</text>
                    <radio-group @change="genderChange">
                        <label class="radio">
                            <radio value="男" color="#27ba9b" :checked="memberProfile.gender === '男'" />
                            男
                        </label>
                        <label class="radio">
                            <radio value="女" color="#27ba9b" :checked="memberProfile.gender === '女'" />
                            女
                        </label>
                    </radio-group>
                </view>
                <view class="form-item">
                    <text class="label">出生日期</text>
                    <picker @change="handleBirthdayChange" mode="date" start="1900-01-01" :end="endTime">
                        <view>{{ memberProfile.birthday || "请选择日期" }}</view>
                    </picker>
                </view>
                <view class="form-item">
                    <text class="label">城市</text>
                    <picker @change="handleFullLocationChange" mode="region">
                        <view>{{ memberProfile.fullLocation || "请选择城市" }}</view>
                    </picker>
                </view>
                <view class="form-item">
                    <text class="label">职业</text>
                    <!-- 输入框通过 v-model 双向绑定修改数据 -->
                    <input v-model="memberProfile.profession" placeholder="请填写职业" />
                </view>
                <!-- 提交按钮 -->
                <view class="button" @click="handleSubmitForm">保 存</view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex"
import { getMemberProfile, postMemberProfileAvatar, putMemberProfile } from "@/api/profile"
import dayjs from "dayjs";
export default {
    data() {
        return {
            memberProfile: null,
        };
    },
    computed: {
        ...mapState(["safeArea"]),
        ...mapState("user", ["userInfo"]), //用户数据
        // 处理日期  慎重  dayjs
        endTime() {
            // const date = new Date();
            // // 2022-09-02
            // const year = date.getFullYear();
            // let month = date.getMonth() + 1;
            // month = month < 10 ? "0" + month : month;
            // let day = date.getDate();
            // day = day < 10 ? "0" + day : day;
            // console.log(`${year}-${month}-${day}`);
            // return `${year}-${month}-${day}`;

            return dayjs().format("YYYY-MM-DD");
        },
    },
    onShow() {
        this.getMemberProfile()
    },
    methods: {
        ...mapMutations("user", ["setUserInfo"]),
        //获取个人信息
        async getMemberProfile() {
            //传递token
            const res = await getMemberProfile()
            // console.log(res);
            this.memberProfile = res.result
        },
        // 点击 修改头像
        async changeAvatar() {
            /* 
            1 调用小程序的api wx.chooseMedia(Object object)  来获取选择的头像地址  临时
            2 把临时地址 上传到接口  返回在线地址 
             */
            const [err1, res1] = await uni.chooseMedia({
                count: 1, // 同时上传的文件个数
                mediaType: ["image"], // 选择的文件类型
            });
            // console.log(err1);
            // console.log(res1);

            // 获取图片的临时地址
            const tempFilePath = res1.tempFiles[0].tempFilePath;
            const [err2, res2] = await postMemberProfileAvatar(tempFilePath)
            // 把json字符串转成真正对象
            const data = JSON.parse(res2.data)
            const avatar = data.result.avatar

            this.memberProfile.avatar = avatar //页面头像更新
        },
        //性别切换
        genderChange(ev) {
            this.memberProfile.gender = ev.detail.value
        },
        // 选择出生日期
        handleBirthdayChange(ev) {
            // console.log(ev);
            this.memberProfile.birthday = ev.detail.value;
        },
        //选择 城市信息
        handleFullLocationChange(ev) {
            console.log(ev);
            //获取完整路径
            this.memberProfile.fullLocation = ev.detail.value.join("")
            // 2 根据接口的要求来获取 省市区编码
            // 省
            this.memberProfile.provinceCode = ev.detail.code[0];
            //市
            this.memberProfile.ccityCode = ev.detail.code[1];
            //区
            this.memberProfile.countyCode = ev.detail.code[2];

            console.log(this.memberProfile);
        },
        async handleSubmitForm() {
            /* 
             1 获取要提交的数据
             2 进行表单的验证
             3 发送 修改的请求
             4 同步去修改 vuex中的 头像和昵称
             5 提示 恭喜用户
             6 延时一会 返回上一页
              */
            const {
                birthday,
                cityCode,
                countyCode,
                gender,
                nickname,
                profession,
                provinceCode,
            } = this.memberProfile;
            // 进行表单的验证  - 在这 忽略
            const params = {
                birthday,
                cityCode,
                countyCode,
                gender,
                nickname,
                profession,
                provinceCode,
            };
            // 发送给后端 完成数据的修改
            const res = await putMemberProfile(params);

            // 实时修改更新好显示到页面的数据
            const userInfo = { ...this.userInfo }; // 引用类型 直接写等于号 地址的传递 本质上
            // const userInfo = this.userInfo ; // 引用类型 直接写等于号 地址的传递 本质上
            // userInfo 和 this.userInfo 同一个地址  修改了 a ，b也会跟着修改

            userInfo.avatar = this.memberProfile.avatar;
            userInfo.nickname = this.memberProfile.nickname;

            this.setUserInfo(userInfo); // 触发 mutations

            //恭喜用户
            uni.showToast({ title: "修改成功" })
            //延迟一会 跳转上一页
            setTimeout(() => {
                uni.navigateBack()
            }, 1500);
        }
    }
};
</script>

<style lang="scss">
page {
    height: 100%;
    overflow: hidden;
    background-color: #f4f4f4;
}

.viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-image: url(https://static.botue.com/erabbit/static/images/order_bg.png);
    background-size: auto 392rpx;
    background-repeat: no-repeat;
}

.navbar {
    .title {
        height: 40px;
        line-height: 32px;
        text-align: center;
        font-size: 17px;
        font-weight: 500;
        color: #fff;
    }

    .back {
        position: absolute;
        left: 20rpx;
        top: 22px;
        font-size: 23px;
        z-index: 9;
        color: #fff;
    }
}

.avatar {
    text-align: center;
    padding: 20rpx 0 40rpx;

    image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
    }

    text {
        display: block;
        padding-top: 20rpx;
        line-height: 1;
        font-size: 26rpx;
        color: #fff;
    }
}

.form {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;

    .form-item {
        display: flex;
        height: 96rpx;
        line-height: 46rpx;
        padding: 25rpx 10rpx;
        background-color: #fff;
        font-size: 28rpx;
        border-bottom: 1rpx solid #ddd;

        &:last-child {
            border: none;
        }

        .label {
            width: 180rpx;
            color: #333;
        }

        input {
            flex: 1;
            display: block;
            height: 46rpx;
        }

        .radio {
            display: inline-block;
            height: 46rpx;
            margin-right: 20rpx;
            vertical-align: middle;
        }

        radio {
            transform: scale(0.7) translateY(-2px);
        }

        picker {
            flex: 1;
        }
    }
}

.button {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
}
</style>
